<template>
  <!--
     1. 点击打开弹框 再点击关闭
        核心思路: v-if  取反操作

     2. 首次打开展示的是省的数据 点击某个省列表就会变成当前省下面的市列表
        再点击市就会显示当前市下面的区
        再点击区 弹框关闭 并且把刚才点击的所有数据组合起来成为一个完整的地区

        数据结构：
         1. level 0(省) 1(市) 2(县)
         2. areaList  当前省下的市列表  当前市下面的县列表
            每次点击的时候都会取这个字段替换一下用来渲染列表的响应式数据

    作业：点击空白区域 把弹框也关掉

  -->
  <div class="xtx-city">
    <div class="select" @click.stop="toggle">
      <span class="placeholder" v-if="!changeResult.fullLocation">请选择配送地址</span>
      <!-- <span class="value" v-else>{{changeResult.provinceName}} {{changeResult.cityName}} {{changeResult.countyName}}</span> -->
      <span class="value" v-else>{{changeResult.fullLocation}}</span>
      <i class="iconfont icon-angle-down"></i>
    </div>
    <div class="option" v-if="showFlag">
      <span class="ellipsis"
        v-for="i in list"
        :key="i.id"
        @click.stop="clickHandler(i)">{{i.name}}</span>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted, watch } from 'vue'
import axios from 'axios'
export default {
  name: 'XtxCity',
  emits: ['get-data'],
  setup (props, { emit }) {
    // 点击空白区域 关闭城市弹窗
    document.addEventListener('click', () => {
      showFlag.value = false
    })
    // 1. 点击打开关闭交互实现
    const showFlag = ref(false)
    function toggle () {
      showFlag.value = !showFlag.value
      // 显示弹窗时，请求城市数据
      if (showFlag.value) {
        loadList()
      }
      // list.value = []
      // cacheList = []
    }

    // 2. 真实数据渲染
    const list = ref([])
    let cacheList = []
    function loadList () {
      axios.get('https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json')
        .then(res => {
          console.log(res)
          list.value = res.data
          // 存一份
          cacheList = res.data
        })
    }
    onMounted(() => {
      // 这种是点开页面就直接请求城市数据
      // loadList()
    })
    // 3. 点击交互
    // 点击之后需要把areaList重新交给list进行覆盖
    function clickHandler (i) {
      list.value = i.areaList
      // 存数据 判断 level
      if (i.level === 0) {
        changeResult.provinceCode = i.code
        changeResult.provinceName = i.name
      }
      if (i.level === 1) {
        changeResult.cityCode = i.code
        changeResult.cityName = i.name
      }
      if (i.level === 2) {
        changeResult.countyCode = i.code
        changeResult.countyName = i.name
        // 将完整地址赋值到对应字段
        changeResult.fullLocation = `${changeResult.provinceName} ${changeResult.cityName} ${changeResult.countyName}`
        showFlag.value = false
        // 向外抛完整数据 不会点一次抛出去一次
        emit('get-data', changeResult)
      }
    }

    // 4. 选择完区(县) 之后 弹框关闭 把所有选过的显示到视图中
    // 申明一个对象 每次点击之后都往对象中存数据
    const changeResult = reactive({
      provinceCode: '', // 省code
      provinceName: '', // 省名称
      cityCode: '', // 城市code
      cityName: '', // 城市名称
      countyCode: '', // 地区code
      countyName: '', // 地区名
      fullLocation: '' // 完整地址
    })

    // 额外的交互
    watch(() => {
      return showFlag.value
    }, () => {
      if (showFlag.value) {
        list.value = cacheList
      }
    })

    return {
      showFlag,
      toggle,
      list,
      clickHandler,
      changeResult,
      cacheList
    }
  }
}
</script>

<style scoped lang="less">
.xtx-city {
  display: inline-block;
  position: relative;
  z-index: 400;
  margin-left: 10px;
  .select {
    border: 1px solid #e4e4e4;
    height: 30px;
    padding: 0 5px;
    line-height: 28px;
    cursor: pointer;
    &.active {
      background: #fff;
    }
    .placeholder {
      color: #999;
    }
    .value {
      color: #666;
      font-size: 12px;
    }
    i {
      font-size: 12px;
      margin-left: 5px;
    }
  }
  .option {
    width: 542px;
    border: 1px solid #e4e4e4;
    position: absolute;
    left: 0;
    top: 29px;
    background: #fff;
    min-height: 30px;
    line-height: 30px;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    > span {
      width: 130px;
      text-align: center;
      cursor: pointer;
      border-radius: 4px;
      padding: 0 3px;
      &:hover {
        background: #f5f5f5;
      }
    }
  }
}
</style>
